<template>
  <div class="member-order">
    <!-- tab组件 -->
    <XtxTabs v-model="activeName" @tab-click="changeTab">
      <XtxTabsPanel
        v-for="item in orderStatus"
        :key="item.name"
        :label="item.label"
        :name="item.name">
      </XtxTabsPanel>
    </XtxTabs>
    <!-- 订单列表 -->
    <div class="order-list">
      <OrderItem v-for="item in orderList" :key="item.id" :order="item" />
    </div>
    <!-- 分页组价 -->
    <XtxPageination />
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
import { orderStatus } from '@/api/constants'
import OrderItem from './components/order-item'
import { findOrderList } from '@/api/order'
export default {
  name: 'MemberOrder',
  components: {
    OrderItem
  },
  setup () {
    const activeName = ref('all')
    const changeTab = (tab) => {
      console.log(tab)
    }
    // 获取数据
    const reqParams = reactive({
      page: 1,
      pageSize: 10,
      orderState: 0
    })
    const orderList = ref([])
    findOrderList(reqParams).then(data => {
      orderList.value = data.result.items
    })
    return { activeName, changeTab, orderStatus, orderList }
  }
}
</script>

<style lang="less" scoped>
.order-list {
  background: #fff;
  padding: 20px;
}
</style>
